<template>
    <div class="subListContainer">
        <HeaderBar :title="title" :isBack="true"/>
        <div class="subListContent">
            <div class="subListTittles" v-if="subLists.length>0">
                <div :class="['subListTittle',selectedSubList.Id==item.Id?'selected':'']" v-for="item in subLists" :key="item.Id" @click.stop="onSubListSelected(item)">{{ item.Name }}</div>
            </div>
            <upLoadDownRefresh 
                @refresh="refresh"
                @load="load"
                :maxDistance="300"
                :triggerDistance="100"
                >
                <div class="subListProducts" v-if="selectProducts.length>0">
                    <div v-for="item in selectProducts" :key="item.Id" class="productItem"  @click.stop="onGotoDetail(item)">
                        <img :src="item.Picture.BigUrl" alt="" >
                        <div class="productItemName">{{ item.Name }}</div>
                    </div>
                </div>
                <div class="subListProducts noproducts" style="font-size: larger;color:lightslategray;" v-else>暂无产品</div>
            </upLoadDownRefresh>
        </div>
    </div>
</template>
<script>
    import HeaderBar from "../components/Header.vue";
    import {searchFindByCid,getSubTitle} from "../api/categories.js";

    export default {
        name: "SubList",
        components: {
            HeaderBar,
        },
        data(){
            return {
                title: "分类产品",
                subLists:[],
                selectedSubList:null,
                selectProducts:[],
                page:1,
                hasmore:true,
            }
        },
        mounted() {
            //console.log(this.$route.query);
            if(this.$route.query.fromHome == 'true'){
                console.log("来自首页，直接加载子分类产品");
                this.title = this.$route.query.name;
                searchFindByCid({
                    cid:this.$route.query.id,
                    page:1,
                    size: 30,mid:0,orderBy:0,specshow:false,tagshow:false
                }).then(res => {
                    //console.log(res);
                    if(res.Data.Items.length>0){
                        this.selectProducts = res.Data.Items;
                        this.hasmore=true
                    }else{
                        this.hasmore=false
                    }
                    //console.log(this.selectProducts);
                });
            }else{
                getSubTitle({
                catId:this.$route.query.id
                }).then(res => {
                    if(res.Data.length>0){
                        this.subLists = res.Data;
                        for(let idx in res.Data){
                            let item = res.Data[idx];
                            //console.log(item,this.$route.query.selectedId);
                            if(item.Id == this.$route.query.selectedId){
                                // this.title = item.Name;
                                this.title = this.$route.query.name;
                                this.selectedSubList = item;
                            }
                        } 
                        console.log(this.selectedSubList);

                        if(!this.selectedSubList){
                            console.log("未找到子分类，默认选择第一个",res.Data);

                                this.title = this.$route.query.name;
                                this.selectedSubList = res.Data[0];

                        }
                        searchFindByCid({
                                cid:this.selectedSubList.Id,
                                page:1,
                                size: 30,mid:0,orderBy:0,specshow:false,tagshow:false
                            }).then(res => {
                                //console.log(res);
                                if(res.Data.Items.length>0){
                                    this.selectProducts = res.Data.Items;
                                    this.hasmore=true
                                }else{
                                    this.hasmore=false
                                }
                                //console.log(this.selectProducts);
                            });
                    }else{
                        this.title = this.$route.query.name;
                    }
                });
            }
            

        },
    methods:{
        load(done){
            if(!this.hasmore) return done();
            this.page += 1;
            let id = this.selectedSubList?this.onSubListSelected.Id:this.$route.query.id;
            searchFindByCid({
                cid:id,
                page:this.page,
                size: 30,mid:0,orderBy:0,specshow:false,tagshow:false
            }).then(res => {
                //console.log(res);
                if(res.Data.Items.length>0){
                    this.selectProducts = this.selectProducts.concat(res.Data.Items);
                    this.hasmore=true
                }else{
                    this.hasmore=false
                }
                done();
                //console.log(this.selectProducts);
            });
        },
        refresh(done) {
            this.page = 1;
            let id = this.selectedSubList?this.onSubListSelected.Id:this.$route.query.id;
            searchFindByCid({
                cid:id,
                page:1,
                size: 30,mid:0,orderBy:0,specshow:false,tagshow:false
            }).then(res => {
                //console.log(res);
                if(res.Data.Items.length>0){
                    this.selectProducts = res.Data.Items;
                    this.hasmore=true
                }else{
                    this.hasmore=false
                }
                done();
                //console.log(this.selectProducts);
            });
        },

        onGotoDetail(item){
            this.$router.push({
                path:'/product',
                query:{
                    id:item.Id,
                }
            })
        },
        onSubListSelected(item){
            // this.title = item.Name;
            this.selectedSubList = item;
            this.selectProducts =[]
            searchFindByCid({
                cid:this.selectedSubList.Id,
                page:1,
                size: 30,mid:0,orderBy:0,specshow:false,tagshow:false
            }).then(res => {
                //console.log(res);
                // //console.log(res);
                if(res.Data.Items.length>0){
                    this.selectProducts = res.Data.Items;
                    this.hasmore=true
                }else{
                    this.hasmore=false
                }
                //console.log(this.selectProducts);
            });
        }
    },

}
</script>
<style scoped>
.subListContainer {
    background-color: #950000;
    height: calc(100vh- 50px);
    width: 100vw;
    display: flex;
    flex-direction: column;
    overflow: auto;
}
::v-deep #scroll-container{
    background-color: white !important;
}
.subListContent{
    display: flex;
    flex-direction: column;
    background-color: white;
    height: 100%;
    text-align: center;

}
.subListProducts{
    
    display: flex;
    flex-wrap: wrap; 
}
.noproducts{
    line-height: 300px;
    justify-content: center;
}
.subListTittles{
    display: flex;
    width: 100%;
    text-align: center;
    border-bottom: 3px solid lightgray;
    height: 40px;
}
.productItem{
    width: 187px;
    height: 200px;
    border-bottom: lightgray solid 1px;
    padding: 10px 0;
}
.productItemName{
    line-height: 40px;
}
.productItem img{
    width: 150px;
    height: 150px;
    object-fit: contain;
}
.productItem:nth-child(odd){
    width: 188px;
    border-right: 1px solid lightgray;

}
.subListTittle{
    width: 80px;
    border-bottom: 3px solid lightgray;
    height: 40px;
    font-size: 16px;
    line-height: 40px;
}
.selected{
    border-bottom: 3px solid red;
}
</style>